<template>
    <n-select v-bind="$attrs" remote :theme-overrides="mergedTheme" class="styled-select"
        :placeholder="props.placeholder || '请输入内容'" :options="$attrs.options" :value="$attrs.value"
        :class="[widthClass, customClass]" :loading="searchLoading" @update:value="handleChange" @search="handleSearch"
        v-on="$listeners">
        <template v-for="(_, slot) in $slots" #[slot]>
            <slot :name="slot" />
        </template>
    </n-select>
</template>


<script setup>
import { computed } from 'vue'

const props = defineProps({
    width: {
        type: String,
        default: 'medium',
        validator: v => ['small', 'medium', 'large', 'full'].includes(v)
    },
    customClass: {
        type: String,
        default: ''
    },
    themeOverrides: {
        type: Object,
        default: () => ({})
    },
    placeholder: {
        type: String,
        default: '请输入要搜索的文章内容'
    }
})

const widthMap = {
    small: 'w-48',
    medium: 'w-64',
    large: 'w-96',
    full: 'w-full'
}

const baseTheme = {
    common: {
        borderRadius: '0.75rem',
        heightMedium: '2.75rem',
        fontSizeMedium: '1rem'
    },
    peers: {
        InternalSelection: {
            textColor: 'rgb(31 41 55)',
            color: 'rgba(255 255 255 / 0.9)',
            colorActive: 'rgba(255 255 255 / 0.95)',
            border: '1px solid rgb(229 231 235)',
            borderHover: '1px solid rgb(147 197 253)',
            borderFocus: '1px solid rgb(59 130 246)',
            boxShadowFocus: 'none',
            caretColor: 'rgb(59 130 246)',
            placeholderColor: 'rgb(156 163 175)',
            paddingSingle: '0 2rem 0 1rem'
        },
        InternalSelectMenu: {
            color: 'rgba(255 255 255 / 0.95)',
            border: '1px solid rgb(229 231 235)',
            borderRadius: '0.75rem',
            optionColorHover: 'rgba(219 234 254 / 0.5)',
            optionColorActive: 'rgba(219 234 254)',
            optionTextColor: 'rgb(31 41 55)',
            optionTextColorActive: 'rgb(29 78 216)',
            padding: '0.5rem'
        },
        Scrollbar: {
            color: 'rgba(147 197 253 / 0.3)',
            colorHover: 'rgba(147 197 253 / 0.5)'
        }
    }
}

const mergedTheme = computed(() => ({
    ...baseTheme,
    ...props.themeOverrides
}))

const widthClass = computed(() => widthMap[props.width])
</script>

<style scoped>
/* 在全局或组件作用域添加以下样式 */
.styled-select :deep(.n-base-selection) {
    /* 核心修改：聚焦/激活状态 */
    --n-border-active: 1px solid rgb(59 130 246) !important;
    /* 蓝色激活边框 */
    --n-box-shadow-active: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
    /* 蓝色阴影 */
    /* 其他需要同步修改的变量 */
    --n-loading-color: rgb(59 130 246) !important;
    /* 加载动画颜色 */
    --n-arrow-color: rgb(107 114 128) !important;
    /* 箭头颜色 */
}

/* 处理不同状态下的箭头颜色 */
.styled-select :deep(.n-base-selection--active) .n-base-suffix__arrow {
    color: rgb(59 130 246) !important;
}

/* 处理焦点环 */
.styled-select :deep(.n-base-selection.n-base-selection--focus) {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}
</style>